<template>
  <div>
      <h2>用户信息列表</h2>
      <ul>
          <li v-for="(item, index) in userList" :key="index">{{ item.id }}. {{ item.name }}</li>
      </ul>
  </div>
</template>

<script>
import axios from "axios"
export default {
    data() {
        return {
          userList: []  
        }
    },
    async created() {
        // 通过 axios 请求 https://jsonplaceholder.typicode.com/users
        
        // 方法一：使用 Promise
        // axios
        //     .get("https://jsonplaceholder.typicode.com/users")
        //     .then(res => {
        //         console.log(res)
        //         const { data, status } = res
        //         if (status === 200) {
        //             this.userList = data
        //         }
        //     })
        //     .catch(err => {
        //         console.log(err)
        //     })

        // 方法二：使用 Async/Await
        const { data } = await axios.get("https://jsonplaceholder.typicode.com/users")
        console.log(data);
        this.userList = data;
    }
}
</script>

<style>
ul {
    list-style: none;
}
</style>